<template>
    <div  class="data-type-chose">
        <el-dropdown  trigger="click">
            <span  :class="['iconfont',typeClass(type)]"></span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  @click.native="chose('STRING')" class="csky">
                    <span class="iconfont icon-wenben"></span>文本
                </el-dropdown-item>
                <el-dropdown-item  @click.native="chose('NUMBER')" class="corigin">
                    <span class="iconfont icon-number"></span>数值
                </el-dropdown-item>
                <el-dropdown-item  @click.native="chose('DATE')" class="cyellow">
                    <span  class="iconfont icon-clock-full"></span>日期
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    import ajax from "@api/ajax";
    import {updateNickNameInfo} from '@api/url'
    import { EventBus } from './EventBus.js';
    export default {
        name: "dataTypeSelect",
        data () {
            return {
                type:'STRING',
            }
        },
        props:{
            dataType:'',
            info:{},//{colName:'',modelId:''}//必传
        },
        computed:{
            typeClass(){
                return function (type) {
                    if('NUMBER'==type) return 'icon-number corigin'
                    else if('DATE'==type) return 'icon-clock-full cyellow'
                    else return 'icon-wenben csky';
                }
            }
        },
        watch:{
            dataType(val){
                this.type=val
            }
        },
        mounted(){
            this.type=this.dataType
        },
        methods:{
            chose(type){
                //修改成功后 修改input数据
                ajax.post(updateNickNameInfo, {
                    colName :this.info.colName,
                    modelId :this.info.modelId,
                    colType:type,
                }).then(res => {
                    this.type=type;
                    this.info.colType=type;
                    this.$emit('complete',this.info);
                    EventBus.$emit('complete',this.info);
                })
            }
        }
    }
</script>

<style lang="stylus">
.data-type-chose{
    .icon-clock-full, .icon-wenben,.icon-number{
        margin: 0 8px;
    }
    .fields-group-wrap{
        display: flex
        flex-direction column
    }
}
</style>
